<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="formRef"
				:inline="true"
				:model="queryData"
				class="flex-warp-container"
			>
				<el-form-item
					label="会员账号:"
					class="flex-row-container"
					label-width="77px"
				>
					<el-input
						v-model.trim="queryData.memberAccount"
						:maxlength="11"
						clearable
						autocomplete="off"
						v-symbols
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item
					label="直属代理账号:"
					class="flex-row-container"
					label-width="120px"
				>
					<el-input
						v-model.trim="queryData.proxyName"
						:maxlength="11"
						clearable
						autocomplete="off"
						v-symbols
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="$t('report.general_account') + ':'"
					class="flex-row-container"
					label-width="77px"
				>
					<el-input
						v-model.trim="queryData.topProxyAccount"
						clearable
						:placeholder="$t('common.please_enter')"
						v-input="{ name: 'num_alp' }"
					></el-input>
				</el-form-item>
				<!--				<el-form-item-->
				<!--					:label="$t('common.belong_merchant') + ':'"-->
				<!--					class="flex-row-container"-->
				<!--					label-width="77px"-->
				<!--				>-->
				<!--					<merchant-select-->
				<!--						v-model="queryData.merchantId"-->
				<!--						:merchantInfo.sync="merchantObj"-->
				<!--					></merchant-select>-->
				<!--				</el-form-item>-->
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90150023')"
						type="warning"
						icon="el-icon-download"
						size="medium"
						:loading="exportBtnLoading"
						@click="handleExportExcel"
					>
						{{ $t('common.export') }}
					</el-button>
					<el-button
						type="success"
						icon="el-icon-sort"
						:disabled="loading"
						size="medium"
						@click="openColSettings"
					>
						{{ $t('common.row_set') }}
					</el-button>
				</el-form-item>
			</el-form>
			<el-link :underline="false" type="danger">
				{{ $t('report.refresh_warning_text') }}
			</el-link>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				ref="elTable"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:max-height="tableHeight"
				:data="tableData"
				:default-sort="{
					prop: 'staticsDate',
					order: 'descending'
				}"
				:key="headKey"
				v-bind="$attrs"
				v-on="$listeners"
				:cell-class-name="cellClassName"
				:header-cell-class-name="cellClassName"
				@sort-change="changeTableSort"
				show-summary
				:summary-method="
					(val) => handleRow(val, subSummary, totalSummary)
				"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<el-table-column
					v-for="(item, index) in newCol"
					:key="'column_' + index"
					:prop="newCol[index].prop"
					:align="item.alignCenter"
					:label="item.label"
					:min-width="item.minWidth"
					:fixed="item.isFixed"
					:sortable="item.isSortColumn"
					:show-overflow-tooltip="item.isShowTip"
				>
					<!-- 通过插槽为表头绑定mousedown和dragover方法 -->
					<template slot="header" slot-scope="{ column, $index }">
						<span
							@mousedown="
								handleMounseDown($event, column, $index)
							"
							@dragover="handleDragover($event, column, $index)"
						>
							{{ item.label }}
						</span>
					</template>
					<template slot-scope="{ row }">
						<div v-if="item.solt === 'numberSolt'">
							{{
								handleNumber('USDT', row[newCol[index].prop], 2)
							}}
						</div>
						<span v-if="item.solt === 'popopSolt'">
							<el-link
								class="lightBlueColor"
								type="primary"
								@click="dialogData(1, row)"
							>
								{{
									handleNumber(
										'USDT',
										row[newCol[index].prop],
										2
									)
								}}
							</el-link>
						</span>
						<div v-if="item.solt === 'defaultSolt'">
							<span>
								{{ row[newCol[index].prop] || '-' }}
							</span>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				class="pageValue"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size.sync="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<detail-page
			v-if="visible"
			:detailData="detailData"
			:visible="visible"
			:closeDialog="
				() => {
					visible = false
				}
			"
		/>
		<el-dialog
			:title="$t('common.row_set')"
			center
			:visible.sync="colSettings.visible"
			width="475px"
			class="setting-div"
			:before-close="cancleSetColumn"
			:close-on-click-modal="false"
		>
			<div>
				<el-link type="primary" class="mb15" @click="clickDel">
					复原缺省
				</el-link>
			</div>
			<div
				v-for="(item, index) in oldCol"
				:key="index"
				class="setting-div"
			>
				<el-checkbox v-if="index !== 0" v-model="item.isShow">
					{{ item.label }}
				</el-checkbox>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancleSetColumn()">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="handleOrderList">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
// import Sortable from 'sortablejs'
import { Storage } from '@/utils/compose'
import summaryList from './components/summaryList'
import { getColumns } from './components/columns'
import MainContent from '@/components/MainContent/index.vue'
const setSearchTime = () => [
  dayjs()
    .subtract(0, 'day')
    .startOf('day'),
  dayjs()
    .subtract(0, 'day')
    .endOf('day')
]
export default {
  name: routerNames.memberExpectedReport,
  components: {
    DetailPage: () => import('./components/ReportBounsDetail.vue'),
    MainContent
  },
  mixins: [list, summaryList],
  data() {
    return {
      tableHeight: 480,
      otherDependenComponents: [],
      queryData: {},
      searchTime: setSearchTime(),
      tableData: [],
      subSummary: {},
      totalSummary: {},
      merchantObj: '',
      axiosDate: '',
      detailData: {},
      visible: false,
      loading: false,
      exportBtnLoading: false,
      oldCol: [],
      dropCol: [],
      newCol: [],
      colSettings: {
        visible: false
      },
      // 拖拽状态
      dragState: {
        start: -3, // 起始元素的 index 防止初始化cellStyle时序号、展开等默认样式改变，最好小于-3
        end: -3, // 移动鼠标时所覆盖的元素 index
        dragging: false, // 是否正在拖动
        direction: undefined // 拖动方向
      },
      headKey: 'dailyProfitAndLoss', // 表头数组变换位置时，重绘table（不更新该值，表头数组变化时，页面不会改变）
      scrollX: 0 // 初始x轴scroll位置（用于定位X轴滚动条）
    }
  },
  computed: {},
  watch: {
    oldCol: {
      handler(newVal) {
        if (newVal) {
          setTimeout(() => {
            this.newCol = newVal.filter((its) => {
              return its.isShow === true
            })
          }, 1000)
        }
      },
      deep: true
    }
  },
  created() {
    const storageColumn = this.getSaveTableData()
    this.dropCol = getColumns()
    const uu_Id = this.$store.state.user.userInfo?.id
    this.oldCol =
      storageColumn &&
        storageColumn[`${uu_Id}_commonTableKey_dailyProfitAndLoss`]
        ? storageColumn[`${uu_Id}_commonTableKey_dailyProfitAndLoss`]
        : this.dropCol
    this.newCol = this.oldCol
  },
  mounted() { },
  methods: {
    dialogData(flag, val) {
      this.detailData = {
        memberId: val.memberId,
        userName: val.memberAccount,
        reportDate: val.staticsDate,
        merchantId: val.merchantId
      }
      this.visible = true
    },
    // 鼠标摁下触发
    handleMounseDown(e, column, $index) {
      this.dragState.dragging = true
      this.dragState.start = parseInt($index - 0)
      // 添加鼠标抬起事件  消除鼠标摁下立刻松开问题
      document.addEventListener('mouseup', this.handleMouseUp)
      // 添加拖拽结束事件
      document.addEventListener('dragend', this.handleMouseUp)
      // 对选中的表头允许其拖拽
      const dragclass = '.el-table__header-wrapper .' + column.id
      const dragDom = document.querySelectorAll(dragclass)
      dragDom.forEach((dom) => {
        // 允许表头块可以被拖拽 draggable 属性 不允许拖拽dragover等相关拖拽事件无法触发
        dom.setAttribute('draggable', true)
      })
    },
    /** 鼠标在拖拽移动时触发 */
    handleDragover(e, column, $index) {
      if (this.dragState.dragging) {
        // 获取当前滚动条的位置
        const scrollDom = this.$refs.elTable.bodyWrapper
        this.scrollX = scrollDom.scrollLeft
        const index = parseInt($index - 0) // 记录起始列
        /** 实时更改鼠标处于表头的位置 */
        if (index - this.dragState.start !== 0) {
          this.dragState.direction =
            index - this.dragState.start < 0 ? 'left' : 'right' // 判断拖动方向
          this.dragState.end = parseInt($index - 0)
        } else {
          this.dragState.end = this.dragState.start
          this.dragState.direction = null
        }
      }
    },
    /** 鼠标抬起或拖拽结束触发 */
    handleMouseUp() {
      // 更新拖拽后的表头
      this.headDraged(this.dragState)
      const { end } = this.dragState
      // 初始化拖动状态
      this.dragState = {
        start: end, // 记录最后拖动的位置
        end: -9,
        dragging: false,
        direction: undefined
      }
      document.removeEventListener('mouseup', this.handleMouseUp)
      document.removeEventListener('dragend', this.handleMouseUp)
      setTimeout(() => {
        // 重置拖拽状态
        this.dragState.start = -9
      }, 500)
    },
    // 更新拖拽后的表头
    headDraged({ start, end, direction }) {
      if (direction) {
        const originColumn = this.newCol[start]
        // 有位置交换时，原先位置的元素删除，再在目标处插入
        this.oldCol.splice(start, 1)
        this.oldCol.splice(end, 0, originColumn)
        this.headKey = new Date().getTime() + '' // 更新table key值
        const uu_Id = this.$store.state.user.userInfo.id
        const uidKey = uu_Id + '_commonTableKey_dailyProfitAndLoss'
        const getLocalTableData = Storage.get('commonTableKey')
        if (getLocalTableData) {
          Storage.set(
            'commonTableKey',
            Object.assign(getLocalTableData, {
              [uidKey]: this.oldCol
            })
          )
        } else {
          Storage.set('commonTableKey', {
            [uidKey]: this.oldCol
          })
        }
        this.$nextTick(() => {
          // 因为表头重绘后滚动条会移到最左端初始位置，因此如果是在中间部分拖拽，还需要把滚动条在定位到该位置
          this.$refs.elTable.bodyWrapper.scrollLeft = this.scrollX
        })
      }
    },
    // 拖动虚线样式设置
    cellClassName({ columnIndex }) {
      const { start, end, direction } = this.dragState
      const target = columnIndex - 0
      if (target === start) {
        // 被移动的元素
        return 'drag_start'
      } else if (target === end) {
        // 要移动的位置
        return `drag_end_${direction}`
      }
      return ''
    },
    changeTableSort({ column, prop, order }) {
      this.queryData.orderKey = prop
      if (order === 'ascending') {
        // 升序
        this.queryData.orderType = 'asc'
      } else if (column.order === 'descending') {
        // 降序
        this.queryData.orderType = 'desc'
      } else {
        delete this.queryData.orderKey
        delete this.queryData.orderType
      }
      this.loadData()
    },
    loadData() {
      if (+new Date() - 500 < this.axiosDate) return
      for (const index in this.queryData) {
        if (!this.queryData[index]) {
          delete this.queryData[index]
        }
      }
      const params = {
        ...this.queryData,
        ...this.getParams()
      }
      this.loading = true
      this.pageCurrency = this.merchantObj?.currency || ''
      this.$api
        .expectRebatePage(params)
        .then((res) => {
          this.loading = false
          this.axiosDate = +new Date()
          if (res.code === 200) {
            this.tableData = []
            this.tableData = res?.data?.record || []
            this.total = res?.data?.totalRecord || 0
            this.subSummary = res?.data?.summary || {}
          }
        })
        .catch(() => {
          this.loading = false
        })
      this.$api
        .expectRebatePageSummary(params)
        .then((res) => {
          this.loading = false
          if (res.code === 200) {
            this.totalSummary = res?.data || {}
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    search() {
      this.pageNum = 1
      this.loadData()
    },
    reset() {
      this.pageNum = 1
      this.queryData = {}
      this.merchantObj = ''
      this.searchTime = setSearchTime()
      this.loadData()
    },
    handleExportExcel() {
      const params = {
        ...this.queryData
      }
      this.exportBtnLoading = true
      this.exportExcelPublic({
        api: 'expectRebateExport',
        params
      }).finally(() => {
        this.exportBtnLoading = false
      })
    },
    // 提交列设置数据
    handleOrderList() {
      this.colSettings.visible = false
      const uu_Id = this.$store.state.user.userInfo.id
      const uidKey = uu_Id + '_commonTableKey_dailyProfitAndLoss'
      const getLocalTableData = Storage.get('commonTableKey')
      if (getLocalTableData) {
        Storage.set(
          'commonTableKey',
          Object.assign(getLocalTableData, {
            [uidKey]: this.oldCol
          })
        )
        this.oldCol = getLocalTableData[uidKey]
      } else {
        Storage.set('commonTableKey', {
          [uidKey]: this.oldCol
        })
      }
    },
    // 打开列设置弹框
    openColSettings() {
      this.colSettings.visible = true
    },
    // 取消列设置
    cancleSetColumn() {
      this.colSettings.visible = false
      this.colSettings.visible = false
      const getLocalTableData = Storage.get('commonTableKey')
      const uu_Id = this.$store.state.user.userInfo.id
      const uidKey = uu_Id + '_commonTableKey_dailyProfitAndLoss'
      if (getLocalTableData && getLocalTableData[uidKey]) {
        this.oldCol = getLocalTableData[uidKey]
      } else {
        this.oldCol.map((item, index) => {
          item.isShow = true
        })
      }
    },
    // 复原缺省
    clickDel() {
      this.oldCol.map((item, index) => {
        item.isShow = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tips-box {
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -12px;
}
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
</style>
